<template>
   <div class="platform-home">
      <div class="platform-home-header flex_bw_center margin-bottom-10">
         <div class="platform-home-header-left ">
            <div class="platform-home-header-left-title flex_center_center">
               <span class="margin-right-10">你好,{{userName}}</span>

               <div class="platform-home-header-left-title-time">
                  <el-select v-model="value" style="width: 100px">
                     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
               </div>
            </div>
         </div>
         <div class="platform-home-header-right">
            {{ "今天是" + new Date().toLocaleDateString() + "，本周的第" + new Date().getDay() + "天" }}
         </div>
      </div>

      <div class="platform-home-content " >
         <div class="platform-home-content-top margin-bottom-10">
            <div class="dashboard-grid">
               <div class="dashboard-card" v-for="item in dashboardData" :key="item.title" v-animate-on-scroll>
                  <div class="card-header">
                     <span class="card-title">{{ item.title }}</span>
                     <span class="card-icon">
                        <!-- 图标占位 -->
                        <span class="icon-placeholder"></span>
                     </span>
                  </div>
                  <div class="card-main">
                     <span class="card-value">
                        <count-to 
                           :start-val="0" 
                           :end-val="parseFloat(item.value.toString().replace(/,/g, ''))" 
                           :duration="2000"
                           :decimal="item.title.includes('金额') ? 2 : 0"
                           :separator="item.title.includes('金额') ? ',' : ''"
                           :autoplay="true"
                        />
                     </span>
                     <span class="card-change" :class="item.change > 0 ? 'up' : item.change < 0 ? 'down' : ''"
                        v-if="item.unit">
                        {{ item.change > 0 ? '+' : '' }}{{ item.change }}{{ item.unit }}
                     </span>
                  </div>
               </div>
            </div>
         </div>

         <div class="platform-home-content-center flex_bw_center margin-bottom-10">
            <div class="platform-home-content-center-left margin-right-20">
               <div id="sales-bar-chart" class="sales-bar-chart"></div>
            </div>
            <div class="platform-home-content-center-right">
               <div class="todo-panel">
                  <div class="todo-header">
                     <div class="todo-title">待办事项</div>
                     <div class="todo-more">
                        <span>查看全部</span>
                        <i class="el-icon-arrow-right"></i>
                     </div>
                  </div>
                  <div class="todo-content">
                     <swiper :modules="modules" :direction="'vertical'" :slides-per-view="5" :space-between="0"
                        :mousewheel="true"
                        :autoplay="todoList.length > 5 ? { delay: 1500, disableOnInteraction: false } : false"
                        :loop="todoList.length > 5" class="todo-swiper">
                        <swiper-slide v-for="(item, index) in todoList" :key="index" class="todo-item">
                           <div class="todo-item-left">
                              <el-tag size="small" type="success" class="todo-tag">审批</el-tag>
                              <span class="todo-text">{{ item.title }}</span>
                           </div>
                           <div class="todo-item-right">{{ item.date }}</div>
                        </swiper-slide>
                     </swiper>
                  </div>
               </div>
            </div>
         </div>

         <div class="platform-home-content-bottom flex_bw_center">
            <div class="platform-home-content-bottom-item">
               <div class="chart-card">
                  <div class="chart-title">业绩达成率</div>
                  <div style="height: 130px;" id="completion-rate-chart" class=""></div>
                  <div class="chart-info flex_bw_center">
                     <div class="chart-info-item">
                        <div class="info-label">销售目标 (元)</div>
                        <div class="info-value">350,000</div>
                     </div>
                     <div class="chart-info-item">
                        <div class="info-label">回款金额 (元)</div>
                        <div class="info-value">300,000</div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="platform-home-content-bottom-item">
               <div class="chart-card">
                  <div class="chart-title">销售商品分类占比</div>
                  <div id="product-category-chart" class="chart-container"></div>
                  <div class="chart-legend-box">
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #3B82F6;"></span>
                        <span class="legend-label">电器</span>
                        <span class="legend-value">38200.00</span>
                     </div>
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #FBBF24;"></span>
                        <span class="legend-label">服饰鞋类</span>
                        <span class="legend-value">12000.00</span>
                     </div>
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #10B981;"></span>
                        <span class="legend-label">生活用品</span>
                        <span class="legend-value">54020.00</span>
                     </div>
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #F87171;"></span>
                        <span class="legend-label">美妆护肤</span>
                        <span class="legend-value">34000.00</span>
                     </div>
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #3B82F6;"></span>
                        <span class="legend-label">食品</span>
                        <span class="legend-value">82000.00</span>
                     </div>
                  </div>
               </div>
            </div>

            <div class="platform-home-content-bottom-item" style="width: 40%;">
               <div class="chart-card">
                  <div class="chart-title">供应商排行榜</div>
                  <div id="supplier-ranking-chart" class="chart-container"></div>
               </div>
            </div>
            <div class="platform-home-content-bottom-item">
               <div class="chart-card">
                  <div class="chart-title">采购商品分类占比</div>
                  <div id="purchase-category-chart" class="chart-container"></div>
                  <div class="chart-legend-box">
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #818CF8;"></span>
                        <span class="legend-label">电器</span>
                        <span class="legend-value">12200.00</span>
                     </div>
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #FBBF24;"></span>
                        <span class="legend-label">服饰鞋类</span>
                        <span class="legend-value">24000.00</span>
                     </div>
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #34D399;"></span>
                        <span class="legend-label">生活用品</span>
                        <span class="legend-value">21020.00</span>
                     </div>
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #F87171;"></span>
                        <span class="legend-label">美妆护肤</span>
                        <span class="legend-value">18900.00</span>
                     </div>
                     <div class="legend-item">
                        <span class="legend-dot" style="background-color: #3B82F6;"></span>
                        <span class="legend-label">食品</span>
                        <span class="legend-value">42000.00</span>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Mousewheel } from 'swiper/modules';
import 'swiper/css';
import { ref, onMounted, nextTick, defineComponent } from "vue";
import api from "@/api/index.js";
import * as echarts from 'echarts'
import CountTo from './components/CountTo.vue'; // 引入数字动画组件
const value = ref<string>('')
interface options {
   value: string,
   label: string,
}
const options: options[] = [
    {
        value: 'year',
        label: '本年',
    },
    {
        value: 'month',
        label: '本月',
    },
    {
        value: 'week',
        label: '本周',
    },
    {
        value: 'day',
        label: '本日',
    }
]

const dashboardData = [
   { title: '新增客户（人）', value: 42, change: 0, unit: '' },
   { title: '新增销售（单）', value: 128, change: 4.2, unit: '%' },
   { title: '销售金额（元）', value: 1200, change: -1.8, unit: '%' },
   { title: '销售退货（单）', value: 8, change: -1.2, unit: '%' },
   { title: '销售退货金额（元）', value: 9800, change: 1.5, unit: '%' },
   { title: '新增供应商（个）', value: 5, change: 0, unit: '' },
   { title: '新增采购（单）', value: 56, change: 3.4, unit: '%' },
   { title: '采购金额（元）', value: 2345, change: -2.0, unit: '%' },
   { title: '采购退货（单）', value: 4, change: -1.2, unit: '%' },
   { title: '采购退货金额（元）', value: 4500, change: -1.2, unit: '%' }
]

// 待办事项数据
const todoList = ref([
   { title: '王当的采购申请审批', date: '2024-02-21' },
   { title: '李五的采购申请审批', date: '2024-02-20' },
   { title: '赵六顺的采购申请审批', date: '2024-02-18' },
   { title: '伍万里的采购申请审批', date: '2024-02-16' },
   { title: '刘万的采购申请审批', date: '2024-02-16' },
   { title: '张三的采购申请审批', date: '2024-02-15' },
   { title: '李四的采购申请审批', date: '2024-02-14' }
]);

// 分类数据
const categoryData = ref([
   { name: '电器', value: 38200.00, color: '#3B82F6', percent: '34%' },
   { name: '服饰鞋类', value: 12000.00, color: '#FBBF24', percent: '11%' },
   { name: '生活用品', value: 54020.00, color: '#10B981', percent: '24%' },
   { name: '美妆护肤', value: 34000.00, color: '#F87171', percent: '15%' },
   { name: '食品', value: 82000.00, color: '#3B82F6', percent: '16%' }
]);

// 采购分类数据
const purchaseCategoryData = ref([
   { name: '电器', value: 12200.00, color: '#818CF8', percent: '15%' },
   { name: '服饰鞋类', value: 24000.00, color: '#FBBF24', percent: '30%' },
   { name: '生活用品', value: 21020.00, color: '#34D399', percent: '25%' },
   { name: '美妆护肤', value: 18900.00, color: '#F87171', percent: '20%' },
   { name: '食品', value: 42000.00, color: '#3B82F6', percent: '10%' }
]);

// 供应商数据
const supplierData = ref([
   { name: '供应商一', value: 18234.96 },
   { name: '供应商二', value: 18234.96 },
   { name: '供应商三', value: 18234.96 },
   { name: '供应商四', value: 18234.96 },
   { name: '供应商五', value: 18234.96 },
   { name: '其他', value: 18234.96 }
]);

// 自定义指令：元素进入视口时添加动画
const vAnimateOnScroll = {
  mounted: (el: HTMLElement) => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.classList.add('animate-in');
          observer.unobserve(el);
        }
      });
    }, { threshold: 0.1 });
    
    observer.observe(el);
  }
};

// 初始化销售业绩图表
const initSalesChart = () => {
   nextTick(() => {
      const chartDom = document.getElementById('sales-bar-chart');
      if (chartDom) {
         const myChart = echarts.init(chartDom);

         const option = {
            title: {
               text: '销售业绩图',
               left: '10',
               top: '4',
               textStyle: {
                  fontSize: 14,
                  fontWeight: 600,
                  color: '#333'
               }
            },
            grid: {
               left: '3%',
               right: '1%',
               top: 65,
               bottom: 10,
               containLabel: true
            },
            tooltip: {
               trigger: 'axis',
               backgroundColor: '#fff',
               borderColor: '#eee',
               borderWidth: 1,
               textStyle: { color: '#333' },
               extraCssText: 'box-shadow:0 2px 8px rgba(0,0,0,0.08);'
            },
            legend: {
               data: ['销售收入', '目标业绩'],
               right: 500,
               top: 15,
               itemWidth: 18,
               itemHeight: 10,
               textStyle: { color: '#666', fontSize: 14 }
            },
            xAxis: {
               type: 'category',
               data: Array.from({ length: 29 }, (_, i) => (i + 1).toString().padStart(2, '0')),
               axisLine: { lineStyle: { color: '#e5e6eb' } },
               axisTick: { show: false },
               axisLabel: { color: '#888', fontSize: 13 }
            },
            yAxis: {
               name: '单位/个',
               type: 'value',
               nameTextStyle: {
                  align: 'right',
                  color: '#86909C', // 设置颜色为红色
                  fontSize: 12 // 可选，设置字体大小
               },
               splitLine: { lineStyle: { color: '#f0f0f0' } },
               axisLabel: { color: '#888', fontSize: 13 }
            },
            series: [
               {
                  name: '销售收入',
                  type: 'bar',
                  data: [1000, 2000, 1500, 4000, 2500, 6000, 7000, 3000, 8000, 5000, 4000, 3500, 2700, 2600, 2900, 5000, 3200, 2500, 3100, 2800, 3300, 3600, 4000, 3700, 4200, 4800, 3900, 3400, 3200],
                  barWidth: 18,
                  itemStyle: {
                     color: '#6860FF',
                     borderRadius: [3, 3, 0, 0],

                     borderColor: 'rgba(84,112,198,0.15)',
                     borderWidth: 4
                  }
               },
               {
                  name: '目标业绩',
                  type: 'bar',
                  data: Array(29).fill(10000),
                  barWidth: 18,
                  itemStyle: {
                     color: 'rgba(84,112,198,0.15)',
                     borderRadius: [6, 6, 0, 0],

                  },
                  barGap: '-100%',
                  z: 0
               }
            ]
         };

         myChart.setOption(option);
         window.addEventListener('resize', () => myChart.resize());
      }
   });
};

// 初始化业绩达成率图表
const initCompletionRateChart = () => {
   nextTick(() => {
      const chartDom = document.getElementById('completion-rate-chart');
      if (chartDom) {
         const myChart = echarts.init(chartDom);

         const option = {
            series: [
               {
                  type: 'gauge',
                  startAngle: 100,
                  endAngle: -270,
                  radius: '100%',
                  pointer: {
                     show: false
                  },
                  progress: {
                     show: true,
                     overlap: false,
                     roundCap: true,
                     clip: false,
                     itemStyle: {
                        color: {
                           type: 'linear',
                           x: 0,
                           y: 0,
                           x2: 0,
                           y2: 1,
                           colorStops: [
                              { offset: 0, color: '#6366F1' },
                              { offset: 1, color: '#818CF8' }
                           ]
                        },
                        shadowColor: 'rgba(99, 102, 241, 0.2)',
                        shadowBlur: 20
                     }
                  },
                  axisLine: {
                     lineStyle: {
                        width: 15,
                        color: [
                           [1, '#EBEDF5']
                        ]
                     }
                  },
                  splitLine: {
                     show: false
                  },
                  axisTick: {
                     show: false
                  },
                  axisLabel: {
                     show: false
                  },
                  data: [
                     {
                        value: 90,
                        name: '完成率',
                        title: {
                           offsetCenter: ['0%', '-20%']
                        },
                        detail: {
                           offsetCenter: ['0%', '14%']
                        }
                     }
                  ],
                  detail: {

                     fontSize: 20,
                     fontWeight: 'bold',
                     color: '#333',
                     formatter: '{value}%',
                     show: true,
                     valueAnimation: true
                  }
               }
            ]
         };

         myChart.setOption(option);
         window.addEventListener('resize', () => myChart.resize());
      }
   });
};

// 初始化销售商品分类占比图表
const initProductCategoryChart = () => {
   nextTick(() => {
      const chartDom = document.getElementById('product-category-chart');
      if (chartDom) {
         const myChart = echarts.init(chartDom);

         const option = {
            tooltip: {
               trigger: 'item',
               formatter: '{b}: {c} ({d}%)',
               backgroundColor: '#fff',
               borderColor: '#eee',
               borderWidth: 1,
               textStyle: { color: '#333' },
               extraCssText: 'box-shadow:0 2px 8px rgba(0,0,0,0.08);'
            },
            legend: {
               show: false
            },
            series: [
               {
                  name: '销售分类',
                  type: 'pie',
                 roseType: 'radius',
                  center: ['50%', '50%'],
                    radius: ['0%', '70%'],
                  avoidLabelOverlap: true,
                  itemStyle: {
                     borderColor: '#fff',
                     borderWidth: 2
                  },
                  label: {
                     show: true,
                     formatter: '{d}%',
                     fontSize: 12,
                     color: '#666',
                     position: 'outside',
                     alignTo: 'edge',
                     edgeDistance: '10%',
                     distanceToLabelLine: 5
                  },
                  labelLine: {
                     show: true,
                     length: 15,
                     length2: 10,
                     smooth: true
                  },
                  data: [
                     { value: 18200, name: '电器', itemStyle: { color: '#3B82F6' } },
                     { value: 12000, name: '服饰鞋类', itemStyle: { color: '#FBBF24' } },
                     { value: 14020, name: '生活用品', itemStyle: { color: '#10B981' } },
                     { value: 14000, name: '美妆护肤', itemStyle: { color: '#F87171' } },
                     { value: 12000, name: '食品', itemStyle: { color: '#3B82F6' } }
                  ],
                  emphasis: {
                     itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.2)'
                     }
                  }
               }
            ]
         };

         myChart.setOption(option);
         window.addEventListener('resize', () => myChart.resize());
      }
   });
};

// 初始化供应商排行榜图表
const initSupplierRankingChart = () => {
   nextTick(() => {
      const chartDom = document.getElementById('supplier-ranking-chart');
      if (chartDom) {
         const myChart = echarts.init(chartDom);

         // 计算最大值，用于设置柱状图的宽度比例
         const maxValue = Math.max(...supplierData.value.map(item => item.value));

         const option = {
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'shadow'
               },
               formatter: '{b}: ¥{c}',
               backgroundColor: '#fff',
               borderColor: '#eee',
               borderWidth: 1,
               textStyle: { color: '#333' },
               extraCssText: 'box-shadow:0 2px 8px rgba(0,0,0,0.08);'
            },
            grid: {
               left: '18%',
               right: '15%',
               top: '3%',
               bottom: '3%',
               containLabel: false
            },
            xAxis: {
               type: 'value',
               axisLine: {
                  show: false
               },
               axisTick: {
                  show: false
               },
               axisLabel: {
                  show: false
               },
               splitLine: {
                  show: false
               }
            },
            yAxis: {
               type: 'category',
               inverse: false,
               data: supplierData.value.map(item => item.name),
               axisLine: {
                  show: false
               },
               axisTick: {
                  show: false
               },
               axisLabel: {
                  color: '#333',
                  fontSize: 14,
                  margin: 20
               }
            },
            series: [
               {
                  name: '金额',
                  type: 'bar',
                  barWidth: 18,
                  data: supplierData.value.map(item => item.value),
                  itemStyle: {
                     // color: '#3B82F6',
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                           offset: 0,
                           color: "#0084FF"
                        },
                        {
                           offset: 1,
                           color: "#1BDFFC"
                        }
                     ]),
                     borderRadius: [0, 14, 14, 0]
                  },
                  label: {
                     show: true,
                     position: [380, 0],

                     formatter: '¥{c}',
                     fontSize: 12,
                     color: '#333',
                     distance: 5
                  }
               }
            ]
         };

         myChart.setOption(option);
         window.addEventListener('resize', () => myChart.resize());
      }
   });
};

// 初始化采购商品分类占比图表
const initPurchaseCategoryChart = () => {
   nextTick(() => {
      const chartDom = document.getElementById('purchase-category-chart');
      if (chartDom) {
         const myChart = echarts.init(chartDom);

         const option = {
            tooltip: {
               trigger: 'item',
               formatter: '{b}: {c} ({d}%)',
               backgroundColor: '#fff',
               borderColor: '#eee',
               borderWidth: 1,
               textStyle: { color: '#333' },
               extraCssText: 'box-shadow:0 2px 8px rgba(0,0,0,0.08);'
            },
            legend: {
               show: false
            },
            series: [
               {
                  name: '采购分类',
                  type: 'pie',
           
                  roseType: 'radius',
                  center: ['50%', '38%'],
                    radius: ['0%', '70%'],
                  avoidLabelOverlap: true,
                  itemStyle: {
                     borderColor: '#fff',
                     borderWidth: 2
                  },
                  label: {
                     show: true,
                     position: 'outside',
                     formatter: function (params) {
                        if (params.name === '电器') {
                        }
                        return `${params.name} 15%`;
                        return '';
                     },
                     fontSize: 12,
                     color: '#666',
                     lineHeight: 20
                  },
                  labelLine: {
                     show: true,
                     length: 15,
                     length2: 10,
                     smooth: true
                  },
                  data: [
                     { value: 12200, name: '电器', itemStyle: { color: '#818CF8' } },
                     { value: 14000, name: '服饰鞋类', itemStyle: { color: '#FBBF24' } },
                     { value: 11020, name: '生活用品', itemStyle: { color: '#34D399' } },
                     { value: 18900, name: '美妆护肤', itemStyle: { color: '#F87171' } },
                     { value: 12000, name: '食品', itemStyle: { color: '#3B82F6' } }
                  ],
                  emphasis: {
                     itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.2)'
                     }
                  }
               }
            ]
         };

         myChart.setOption(option);
         window.addEventListener('resize', () => myChart.resize());
      }
   });
};

const modules = [Autoplay, Mousewheel];
let userName = ref("");
// 初始化标题，拿到用户的信息
const initTitle = () => {
   
   const userInfo = JSON.parse(localStorage.getItem("userInfo") || '{}');
   if (userInfo) {
      userName.value = userInfo.nickname;
   }
}
// 数据初始化
onMounted(() => {
   initTitle();
   initSalesChart();
   initCompletionRateChart();
   initProductCategoryChart();
   initSupplierRankingChart();
   initPurchaseCategoryChart();

   // 添加页面载入动画
   document.querySelector('.platform-home')?.classList.add('page-loaded');
});
</script>

<style scoped lang="scss">
.platform-home {
   width: 100%;
   height: 100%;
   // border: 1px solid red;
   font-family: 黑体;
   letter-spacing: 2px;
   opacity: 0;
   transform: translateY(10px);
   transition: opacity 0.5s ease, transform 0.5s ease;
   
   &.page-loaded {
     opacity: 1;
     transform: translateY(0);
   }

   &_header {
      &_right {
         color: #a1a1a1;
      }
   }

   &_content {
      width: 100%;
      height: 100%;
      border: 1px solid blue;
   }
}

.dashboard-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 14px;
   margin: 0 auto;
   // max-width: 1600px;
}

.dashboard-card {
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
   border: 1px solid #f0f0f0;
   padding: 14px 20px 14px 24px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 104px;
   transition: box-shadow 0.2s;
   position: relative;
   opacity: 0;
   transform: translateY(20px);

   &:hover {
      box-shadow: 0 8px 28px 0 rgba(64, 158, 255, 0.15);
      transform: translateY(-3px);
   }
}

.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
}

.card-title {
   font-size: 15px;
   color: #666;
   font-weight: 500;
}

.card-icon {
   position: absolute;
   right: 14px;
   top: 20px;
   width: 74px;
   height: 74px;
   background: #f5f6fa;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;

   .icon-placeholder {
      width: 44px;
      height: 44px;
      background: #d3d6e4;
      border-radius: 50%;
      display: inline-block;
   }
}

.card-main {
   display: flex;
   align-items: baseline;
   gap: 10px;
}

.card-value {
   font-size: 2rem;
   font-weight: bold;
   color: #222;
}

.card-change {
   font-size: 1rem;
   margin-left: 6px;

   &.up {
      color: #1ecb8c;
   }

   &.down {
      color: #f56c6c;
   }
}

.platform-home-content{
   height: calc(100% - 42px);

}

.platform-home-content-center {
   width: 100%;
   height: 330px;

   margin-bottom: 30px;

   .platform-home-content-center-left {
      width: 70%;
      height: 100%;
      // border: 1px solid blue;
   }

   .platform-home-content-center-right {
      width: 30%;
      height: 100%;
      // border: 1px solid green;
   }
}

.platform-home-content-bottom {
   width: 100%;
   height: 280px;

   gap: 10px;

   .platform-home-content-bottom-item {
      width: 20%;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
      border: 1px solid #f0f0f0;
      padding: 16px;
   }
}

.sales-bar-chart {
   width: 100%;
   // height: 240px;
   height: 100%;
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
   border: 1px solid #f0f0f0;
   margin-top: 0;
   padding: 0;
}

// 待办事项面板样式
.todo-panel {
   width: 100%;
   height: 100%;
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
   border: 1px solid #f0f0f0;
   display: flex;
   flex-direction: column;
}

.todo-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
   border-bottom: 1px solid #f0f0f0;
}

.todo-title {
   font-size: 16px;
   font-weight: 600;
   color: #333;
}

.todo-more {
   font-size: 14px;
   color: #666;
   cursor: pointer;
   display: flex;
   align-items: center;

   span {
      margin-right: 4px;
   }

   &:hover {
      color: #409EFF;
   }
}

.todo-content {
   flex: 1;
   overflow: hidden;

}

.todo-swiper {
   height: 214px;
   width: 488px;
}

.todo-item {
   width: 93%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
   border-bottom: 1px solid #f5f5f5;
   height: auto !important;
   padding-bottom: 11px;
   height: 20px !important;

   &:last-child {
      border-bottom: none;
   }

   &:hover {
      background-color: #f5f8ff;
   }
}

.todo-item-left {
   display: flex;
   align-items: center;
}

.todo-tag {
   margin-right: 10px;
   background-color: #26c997 !important;
   border-color: #26c997 !important;
   color: #fff;
}

.todo-text {
   font-size: 14px;
   color: #333;
}

.todo-item-right {
   font-size: 14px;
   color: #999;
}

// 图表卡片样式
.chart-card {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   transition: all 0.3s ease;
   
   &:hover {
      box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.08);
   }
}

.chart-title {
   font-size: 16px;
   font-weight: 600;
   color: #333;
   margin-bottom: 12px;
}

.chart-container {
   flex: 1;
   width: 100%;
}

.chart-info {
   margin-top: 30px;
   padding-top: 10px;
   border-top: 1px solid #f0f0f0;
}

.chart-info-item {
   text-align: center;
}

.info-label {
   font-size: 14px;
   color: #666;
   margin-bottom: 4px;
}

.info-value {
   font-size: 18px;
   font-weight: 600;
   color: #333;
}

// 图例样式
.chart-legend-box {
   padding: 10px 0 0 0;
   margin-top: 5px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: space-between;
}

.legend-item {
   display: flex;
   align-items: center;
   font-size: 12px;
   margin-right: 10px;
   margin-bottom: 5px;
}

.legend-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   margin-right: 6px;
}

.legend-label {
   color: #666;
   margin-right: 6px;
}

.legend-value {
   color: #333;
   font-weight: 500;
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

// 应用动画
.animate-in {
  animation: fadeInUp 0.6s forwards;
  
  &:nth-child(1) { animation-delay: 0.1s; }
  &:nth-child(2) { animation-delay: 0.2s; }
  &:nth-child(3) { animation-delay: 0.3s; }
  &:nth-child(4) { animation-delay: 0.4s; }
  &:nth-child(5) { animation-delay: 0.5s; }
  &:nth-child(6) { animation-delay: 0.6s; }
  &:nth-child(7) { animation-delay: 0.7s; }
  &:nth-child(8) { animation-delay: 0.8s; }
  &:nth-child(9) { animation-delay: 0.9s; }
  &:nth-child(10) { animation-delay: 1s; }
}

@media screen and (max-height: 1000px) {
   .platform-home-content-bottom {
      height: 240px;
   }
}
@media screen and (max-height: 1000px) {
   .platform-home-content-center {
      height: 33%;
   }
}
@media screen and (max-height: 1000px) {
   .dashboard-card {
    min-height: 90px;
   }
}
@media screen and (min-height: 1000px) {
   .todo-swiper {
      height: 275px;
   }
   .todo-item{
      height: 31px !important;

   }
}
</style>